import React from 'react';
import Head from 'next/head';
import Layout from '../components/Layout';
import Banner from '../components/Banner';
import Card from '../components/Card';
import Link from 'next/link';
import Image from 'next/image';

export default function Home() {
  const featuredJobs = [
    {
      id: 1,
      title: '高级软件工程师',
      location: '北京',
      department: '研发部',
      link: '/careers/positions/1',
      isHighlighted: true,
    },
    {
      id: 2,
      title: '产品经理',
      location: '上海',
      department: '产品部',
      link: '/careers/positions/2',
    },
    {
      id: 3,
      title: 'UI/UX设计师',
      location: '广州',
      department: '设计部',
      link: '/careers/positions/3',
    },
  ];

  return (
    <Layout
      title="凡科星悦 - 领先的科技创新企业"
      description="凡科星悦是一家专注于科技创新的领先企业，致力于为客户提供最优质的产品和服务。"
    >
      <Banner
        title="加入创新者的行列"
        subtitle="我们期待与有才华、有梦想的你一起，开创科技未来，共同成长。"
        buttonText="浏览职位"
        buttonLink="/careers"
      />

      {/* About Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row items-center">
            <div className="md:w-1/2 mb-12 md:mb-0 md:pr-12">
              <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-6 relative">
                <span className="relative z-10">关于凡科星悦</span>
                <span className="absolute -z-10 bottom-0 left-0 w-20 h-3 bg-blue-100"></span>
              </h2>
              <p className="text-gray-600 text-lg mb-8 leading-relaxed">
                凡科星悦成立于2010年，是一家专注于人工智能、大数据和云计算领域的高科技企业。我们致力于通过技术创新，为全球客户提供先进的软件解决方案。
              </p>
              <p className="text-gray-600 text-lg mb-8 leading-relaxed">
                十多年来，我们不断发展壮大，现已拥有超过1000名员工，业务遍布全球20多个国家和地区。我们坚持"以人为本、创新驱动"的企业文化，为员工提供广阔的发展平台和优厚的福利待遇。
              </p>
              <Link href="/about">
                <span className="btn px-8 py-3 rounded-full bg-blue-600 text-white hover:bg-blue-700 transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-1 inline-flex items-center cursor-pointer">
                  了解更多
                  <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                  </svg>
                </span>
              </Link>
            </div>
            <div className="md:w-1/2">
              <div className="relative">
                <div className="absolute -top-6 -left-6 w-24 h-24 rounded-lg bg-blue-50 -z-10"></div>
                <div className="absolute -bottom-6 -right-6 w-32 h-32 rounded-lg bg-blue-100 -z-10"></div>
                <div className="relative h-96 rounded-lg overflow-hidden shadow-2xl">
                  <div
                    className="absolute inset-0 bg-cover bg-center transition-transform duration-5000 hover:scale-110"
                    style={{ backgroundImage: "url('/images/about-company.jpg')" }}
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Featured Jobs Section */}
      <section className="py-20 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4 inline-block relative">
              热门职位
              <span className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-blue-500"></span>
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto text-lg mt-8">
              探索我们的职位机会，加入我们的团队，一起创造未来。我们提供具有竞争力的薪资和福利，以及广阔的职业发展空间。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {featuredJobs.map((job) => (
              <Card
                key={job.id}
                title={job.title}
                location={job.location}
                department={job.department}
                link={job.link}
                isHighlighted={job.isHighlighted}
              />
            ))}
          </div>

          <div className="text-center mt-12">
            <Link href="/careers">
              <span className="inline-block px-8 py-3 bg-white text-blue-600 hover:bg-gray-100 rounded-full border border-blue-200 shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 font-medium cursor-pointer">
                查看所有职位
                <svg className="w-4 h-4 ml-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
              </span>
            </Link>
          </div>
        </div>
      </section>

      {/* Company Culture Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4 inline-block relative">
              企业文化
              <span className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-24 h-1 bg-blue-500"></span>
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto text-lg mt-8">
              我们重视每一位员工的成长和发展，打造开放、多元、创新的工作环境，让每个人都能充分发挥自己的潜力。
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
            <div className="bg-white rounded-xl shadow-lg p-8 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
              <div className="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mb-6">
                <svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-gray-800 mb-4">诚信负责</h3>
              <p className="text-gray-600 leading-relaxed">
                我们坚持以诚信为本，对客户、合作伙伴和员工负责，履行我们的承诺，确保产品和服务的质量。
              </p>
            </div>

            <div className="bg-white rounded-xl shadow-lg p-8 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
              <div className="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mb-6">
                <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-gray-800 mb-4">创新驱动</h3>
              <p className="text-gray-600 leading-relaxed">
                我们鼓励创新思维和尝试，不断挑战自我，突破边界，以创新推动公司和个人的发展。
              </p>
            </div>

            <div className="bg-white rounded-xl shadow-lg p-8 transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl">
              <div className="w-16 h-16 bg-purple-50 rounded-full flex items-center justify-center mb-6">
                <svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
              </div>
              <h3 className="text-xl font-semibold text-gray-800 mb-4">团队合作</h3>
              <p className="text-gray-600 leading-relaxed">
                我们相信团队的力量，鼓励开放交流和协作，尊重多元观点，共同解决问题，实现共赢。
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-24 relative bg-gradient-to-r from-blue-600 to-blue-400 overflow-hidden">
        <div className="absolute top-0 left-0 w-full h-full opacity-10">
          <svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M0,0 L100,0 L100,100 L0,100 Z" fill="url(#grid)" />
          </svg>
          <defs>
            <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
              <path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" strokeWidth="1" />
            </pattern>
          </defs>
        </div>
        
        <div className="container mx-auto px-4 text-center relative z-10">
          <h2 className="text-3xl md:text-5xl font-bold text-white mb-8">准备好加入我们了吗？</h2>
          <p className="text-xl text-blue-100 mb-12 max-w-2xl mx-auto">
            探索我们的职位机会，成为塑造未来的一部分。我们期待与您共同创造精彩。
          </p>
          <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
            <Link href="/careers">
              <span className="inline-block px-8 py-4 bg-white text-blue-600 hover:bg-blue-50 rounded-full font-medium shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer">
                浏览职位
                <svg className="w-4 h-4 ml-2 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
              </span>
            </Link>
            <Link href="/contact">
              <span className="inline-block px-8 py-4 bg-transparent border-2 border-white text-white hover:bg-white/10 rounded-full font-medium shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer">
                联系我们
              </span>
            </Link>
          </div>
        </div>
      </section>
    </Layout>
  );
} 